import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts';
import PropTypes from 'prop-types';

function Bar ({data}) {

  const barxAxis = data.map(item=>item.company)
  const barData = data.map(item=>item.integralAccumulated)
  const slist = [
    {value:'area', name:'区域'},
    {value:'company', name:'公司'},
    {value:'data_month', name:'月份'},
    {value:'record', name:'数据'},
    {value:'remarks', name:'备注'},
  ]
  const label = slist.map(item=>item.name);
  const timeData = slist.map((item)=>{
    return {
      title:{
        text: item.name,
        x:'center',
        textStyle:{
          // color:'#FFF'
        }
      },
      series:[
        {
            name:item.name,
            type:'bar',
            barWidth: '60%',
            data:data.map(key=>key[`${item.value}`])
        }
      ]
    }
  });
  const option = {
    baseOption: {
      // title: {
      //     subtext: '数据来自国家统计局',
      //     textStyle:{
      //       color:'#FFF'
      //     }
      // },
      timeline: {
          // show:false,
          // y: 0,
          axisType: 'category',
          // realtime: false,
          // loop: false,
          autoPlay: true,
          // currentIndex: 2,
          playInterval: 1000,
          // controlStyle: {
          //     position: 'left'
          // },
          lineStyle: {
            // color:'#FFF',
          },
          itemStyle: {
            normal:{
              // color:'#FFF'
            },
            emphasis:{
              color:'#2a77d2'
            }
          },
          label:{
            normal:{
              color:'red',
              show:false
            }
          },
          checkpointStyle:{
            color:'rgb(85, 146, 250)',
            borderColor:'rgb(85, 146, 250)',
            borderWidth:1,
          },
          controlStyle:{
            normal:{
              // borderColor:'#FFF'
            },
            emphasis:{
              borderColor:'#2a77d2'
            }
          },
          data: label,
      },
      grid: {
          left: '3%',
          right: '4%',
          bottom: '30%',
          containLabel: true
      },
      xAxis : [
          {
              type : 'category',
              data : barxAxis,
              axisTick: {
                  // alignWithLabel: true,
                  // show: false
              },
              splitLine: {
                //  show: false
              },
              splitArea: {
                //  show: false
              },
              axisLabel: {
                 interval: 0,
                 rotate: 45,
                 show: true,
                 splitNumber: 15,
                //  height:56,
                 textStyle: {
                     fontFamily: "微软雅黑",
                     fontSize: 12
                 },
                //  rich:{
                 //
                //  }
              },
          }
      ],
      yAxis : [
          {
              type : 'value'
          }
      ],
      tooltip : {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
      },
      color:['rgb(99, 152, 255)'],

    },
    options:timeData
  }
  const bar = {
    title : {
        text:'积分累计',
        x:'center'
    },
      color: ['#3398DB'],
      tooltip : {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
      },
      grid: {
          left: '3%',
          right: '4%',
          bottom: '20%',
          containLabel: true
      },
      xAxis : [
          {
              type : 'category',
              data : barxAxis,
              axisTick: {
                  // alignWithLabel: true,
                  // show: false
              },
              splitLine: {
                //  show: false
              },
              splitArea: {
                //  show: false
              },
              axisLabel: {
                 interval: 0,
                 rotate: 45,
                 show: true,
                 splitNumber: 15,
                //  height:56,
                 textStyle: {
                     fontFamily: "微软雅黑",
                     fontSize: 12
                 },
                //  rich:{
                 //
                //  }
              },
          }
      ],
      yAxis : [
          {
              type : 'value'
          }
      ],
      series : [
          {
              name:'积分累计',
              type:'bar',
              barWidth: '60%',
              data:barData
          }
      ]
  };
  return (
    <ReactEcharts
      option={option}
      style={{height: '50vh', width: '100%'}}
    />
  )
}
Bar.propTypes = {
  data: PropTypes.array.isRequired,
};
export default Bar;
